<template>
    <div class="permission">
      <div class="operate">
        <div>
          <div style="flex: 0 0 auto">
            <ep-search
                v-model="queryParam.h0902"
                :size="size"
                placeholder="请输入点位名称"
                enter-button="chaxun"
                @search="
                () => {
                  this.findList();
                }
              "
            ></ep-search>
          </div>
          <!-- <zh-input prop="h0902"  :size="size" :options="dictData.XZQH"  type="select"  placeholder="区划" v-model="queryParam.h0902" 
              style="width:200px;margin-left: 15px"></zh-input> -->
          <ep-button
              :size="size"
              style="margin-left: 15px"
              icon="refresh.svg"
              @click="
              () => {
                this.flushPage();
              }
            "
          ></ep-button>
          <ep-button
              :size="size"
              style="margin-left: 15px"
              icon="add.svg"
              @click="
              () => {
                this.addYj();
              }
            "
          >新增</ep-button
          >
          <ep-button
              :size="size"
              style="margin-left: 15px"
              icon="add.svg"
              @click="
              () => {
                this.manualSynchronizeInfo();
              }
            "
          >同步数据</ep-button
          >
          <ep-button
              :size="size"
              style="margin-left: 15px"
              icon="add.svg"
              @click="
              () => {
                this.xqtjShow();
              }
            "
          >县市区各类设备统计管理</ep-button
          >
        </div>
        <div>
          <column-manage :column.sync="tableColumn" @change="columnChange"></column-manage>
          <ep-button
              :size="size"
              style="margin-left: 15px"
              icon="export.svg"
              @click="
              () => {
                this.exportExcel();
              }
            "
          >导出</ep-button
          >
        </div>
      </div>
      <a-modal
          title="县市区各类设备统计管理"
          style="top: 20px"
          width="90%"
          destroyOnClose
          v-model="visible1"
          cancelText="关闭"
          @cancel="handleCancel"
      >
        <xq-tj-manager
            ref="XqTjManager"
            @cancel="handleCancel"
        >
        </xq-tj-manager>
      </a-modal>
      <a-modal
          :title="modalTitle"
          centered
          style="margin-top:100px;"
          width="65%"
          destroyOnClose
          v-model="visible"
          cancelText="关闭"
          okText="保存"
          @ok="handleOk"
          @cancel="handleCancel"
      >
      <zh-row :span="24" :gutter="[16,16]">
        <zh-col>
                <zh-form  ref="formInfo"  :model="formInfo"  labelAlign="right" >
                      <zh-input prop="h0902" label="点位名称"  type="text"  placeholder="点位名称" v-model="formInfo.h0902" @blur="getB01Info()"></zh-input>
                      <zh-input prop="h0903" label="设备地址" type="text" placeholder="设备地址" v-model="formInfo.h0903" ></zh-input>
                      <zh-input prop="h0904" label="设备名称"  type="text" placeholder="设备名称" v-model="formInfo.h0904" ></zh-input>
                      <zh-input prop="h0905" label="设备类型"   type="select"  :options="dictData.B0303" placeholder="设备类型" v-model="formInfo.h0905" ></zh-input>
                      <zh-input prop="h0906" label="预警规则"  type="text"  placeholder="预警规则" v-model="formInfo.h0906" ></zh-input>
                      <zh-input prop="h0907" label="预警阈值"  type="text" placeholder="预警阈值" v-model="formInfo.h0907" ></zh-input>
                      <zh-input prop="h0908"  label="当前状态"   :options="dictData.H0908"  type="select" placeholder="当前状态" v-model="formInfo.h0908"  ></zh-input>
                      <zh-input prop="h0909"  label="是否展示"   :options="dictData.H0909"  type="select" placeholder="是否展示" v-model="formInfo.h0909"  ></zh-input>
                </zh-form>
            </zh-col>
        </zh-row>
      </a-modal>
      <div class="ep-table">
        <zh-table
            ref="tableList"
            style="width: 100%"
            :data="tableData"
            height="auto"
            rowId="roleId"
            type="paging"
            :url = "tableUrl"
            :columns="tableColumn"
        >
          <template #filter="{ $panel, column }">
            <input
                type="type"
                v-for="(option, index) in column.filters"
                :key="index"
                v-model="option.data"
                @input="$panel.changeOption($event, true, option)"
            />
          </template>
          <template #operate="{ row }">
            <div class="alert-message">
              <i class="fa fa-exclamation-circle alert-message-icon"></i>
              <span class="alert-message-content" style="margin-left: 20px;">
                <ep-button @click="edit(row)">编辑</ep-button>
              </span>
              <span class="alert-message-content" style="margin-left: 20px;">
                <ep-button @click="del(row)">删除</ep-button>
              </span>
            </div>
          </template>
        </zh-table>
      </div>
    </div>
  </template>
  <script>
  import modal from "ant-design-vue/es/modal";
  import {
    getEarlyWarning,
    saveEarlyWarning,
    delEarlyWarning,
    updateEarlyWarning,
    getPermissionParams,
    manualSynchronizeInfo, getPointInfoByName
  } from "@/services/system/whdngxlApi";
  import ZhTable from "@/components/zh-table/ZhTable";
  const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  import { getBatchDict } from "@/services/system/api";
  import ColumnManage from "@/components/assembly/columnManage";
  import {mapGetters} from "vuex";
  import {TreeSelect} from "ant-design-vue";
  import XqTjManager from "@/pages/whdn/EarlyWarning/XqTjManager";
  export default {
    name: "EarlyWarning",
    components: {
      ZhTable,
      ColumnManage,
      XqTjManager,
    },
    computed: {
      ...mapGetters(['size']),
    },
    data() {
      return {
        dictData: {},
        modalTitle:'',
        labelCol: { sm: { span: 2 }, md: { span: 2 }, xs: { span: 24 }, lg: { span: 2 }, xl: { span: 2 }, xxl: { span: 2 } },
        wrapperCol: { sm: { span: 22 }, md: { span: 22 }, xs: { span: 24 }, lg: { span: 22 }, xl: { span: 22 }, xxl: { span: 22 } },
        queryParam: {
          h0902:'',
        },
        formInfo:{
          b0101:'',
        },
        tableColumn: [
          // { type: "checkbox", width: 50, fixed: "left", visible: true },
          {type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号',visible: true},
          {field: "h0902",title: "点位名称",align: "center",width: 100,visible: true,},
          {field: "h0903",title: "设备地址",align: "center",width: 200,visible: true,},
          {field: "h0904",title: "设备名称",align: "center",width: 150,visible: true,},
          {field: "h0905Name",title: "设备类型",align: "center",width: 150,visible: true,},
          {field: "h0906",title: "预警规则",align: "center",width: 150,visible: true,},
          {field: "h0907",title: "预警阈值",align: "center",width: 150,visible: true,},
          {field: "h0908Name",title: "当前状态",align: "center",width: 150,visible: true,},
          {field: "h0909Name",title: "是否展示",align: "center",width: 150,visible: false,},
          {field: "operate",title: "操作",fixed: "right",align: "center",width: 300, slots: { default: "operate",},visible: true, },
        ],
        tableData: [],
        visible: false,
        visible1: false,
        loading: false,
        tableUrl: getEarlyWarning,
        taskAreaTree:[],
        SHOW_PARENT,
      };
    },
    created() {
      const param = {}
      param.dictFields = 'B0303,H0908,H0909'
      this.$http.post(getBatchDict, param).then(res => {
        this.dictData = res.result
      })
      this.$http.post(getPermissionParams, {}).then((res) => {
        const data = res.result;
        this.taskAreaTree = data.orgTreeData;
      });
    },
    mounted(){
        this.findList()
      },
    methods: {
      //根据点位名称获取点位信息
      getB01Info(){
        if(this.formInfo.h0902 != '' && this.formInfo.h0902 != null){
          const params = {};
          params.b0102 = this.formInfo.h0902
          setTimeout(() => {
            this.$http
                .post(getPointInfoByName, params)
                .then((res) => {
                  if(res.result.b0101){
                    this.formInfo.b0101 = res.result.b0101
                  }else{
                    this.$message.error("根据点位名称未查询到点位信息，请重新输入！");
                  }
                })
                .catch((error) => {
                })
                .finally(() => {});
          }, 50);
        }
      },
      handleOk() {
        debugger
        if(this.formInfo.h0901){
              const param = this.formInfo
              this.$http.post(updateEarlyWarning, param).then(res => {
              if(res.code === 0){
                modal.info({title: '成功提示', content: '修改成功'});
                this.findList()
              }else{
                modal.info({title: '失败提示', content: '修改失败'});
              }
              this.visible = false
            })
          }else{
            if(this.formInfo.b0101 == '' || this.formInfo.b0101 == null ){
              modal.warn({ title: "提示", content: "请先输入点位名称查询点位信息" });
              return;
            }
            const params = this.formInfo
            this.$http.post(saveEarlyWarning,params).then(res => {
              if(res.code === 0){
                modal.info({title: '成功提示', content: '保存成功'});
                this.findList()
              }else{
                modal.info({title: '失败提示', content: '保存失败'});
              }
              this.visible = false
            })
          }
      },
      handleCancel() {
        this.visible = false;
      },
      showOrHide() {
        this.visible = !this.visible;
      },
      showOrHide2(){
        this.visible1=!this.visible1;
      }
      ,
      findList() {
        this.$refs.tableList.query(this.queryParam)
      },
      xqtjShow(){
        this.showOrHide2();
      },
      addYj() {
        this.modalTitle = '新增'
        this.formInfo = {}
        this.showOrHide();
      },
      del(row) {
        modal.confirm({
          title: "确认删除该条预警信息吗？",
          onOk: () => {
            const params = row;
            this.$loading.show("正在处理数据,请等待...");
            setTimeout(() => {
              this.$http
                  .post(delEarlyWarning, params)
                  .then((res) => {
                    this.$message.info("删除成功");
                    this.$loading.hide();
                    this.findList()
                  })
                  .catch((error) => {
                    console.log(JSON.stringify(error));
                    this.$loading.hide();
                  })
                  .finally(() => {});
            }, 50);
          },
          onCancel: () => {},
        });
      },
      exportExcel() {
        this.$refs.tableList.exportData("预警信息管理",'csv')
      },
      flushPage() {
        this.queryParam = {}
        this.findList();
      },
      //查看
      view(row) {
        this.modalTitle = '查看预警信息'
        this.showOrHide();
        this.formInfo = row
      },
      edit(row) {
        this.modalTitle = '编辑预警信息'
        this.showOrHide();
        this.formInfo = row
      },
      columnChange() {
        this.$refs.tableList.refreshColumn();
      },
      manualSynchronizeInfo(){
        this.$http.post(manualSynchronizeInfo, {}).then((res) => {
          this.$message.info("同步成功");
        });
      }
    },
  };
  </script>
  <style lang="less" scoped>
  .permission {
    //padding: 15px 20px 0;
    height: 100%;
    .desc,
    .operate {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #fff;
      > div {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
      }
    }
    .desc {
      margin-bottom: 20px;
    }
  
    .operate {
      margin-bottom: 15px;
      .field {
        flex: 0 0 auto;
        position: relative;
        margin-left: 15px;
        .field-box {
          position: absolute;
          top: 40px;
          left: 0;
          right: -40px;
          z-index: 99;
          border: 1px solid #2175a9;
          background: #002a44;
          border-radius: 5px;
          ul {
            padding: 10px;
            li {
              padding: 1px 0;
            }
          }
          .btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px;
            border-top: 1px solid #2175a9;
            color: #fff;
            p {
              flex: 1;
              text-align: center;
              cursor: pointer;
              &:hover {
                color: #49bbeb;
              }
            }
          }
        }
      }
    }
    .ep-table {
      height: calc(100% - 60px);
    }
  }
  // /*表格 筛选-输入框*/
  // ::v-deep .vxe-table--filter-wrapper {
  //   input {
  //     background: #002a44;
  //     padding-left: 6px;
  //     line-height: 32px;
  //     box-shadow: none !important;
  //     border: none !important;
  //   }
  // }
  </style>
  